import * as echarts from 'echarts'
import { useResizeObserver } from '@vueuse/core'

class FiKerCharts {
  constructor(element, options) {
    this.element = element
    this.options = options
    this.chartInstance = null
    this.initChart()
  }

  initChart() {
    if (this.element) {
      useResizeObserver(this.element, this.resize)
      this.chartInstance = echarts.init(this.element)
      this.setOptions(this.options)
    }
  }

  setOptions(options) {
    if (this.chartInstance) {
      this.chartInstance.setOption(options)
    }
  }

  resize() {
    if (this.chartInstance) {
      this.chartInstance.resize()
    }
  }

  dispose() {
    if (this.chartInstance) {
      this.chartInstance.dispose()
    }
  }
}

export { FiKerCharts }
